<template>
  <div class="newLogin">
    <!-- <img src="@/assets/images/pro03.png" alt=""> -->
    <div class="elForm">
      <div class="loginHeader"> 欢迎登录仪控管理平台</div>
      <div class="loginBg">
        <el-form ref="loginFormRef" :model="loginModel" label-position="top" status-icon :rules="rules"
          class="login-form-class">
          <el-form-item label="用户账号" prop="username">
            <el-input v-model.trim="loginModel.username" :prefix-icon="User" status-icon autocomplete="off"
              class="input-bg">
            </el-input>
          </el-form-item>
          <el-form-item prop="password" label="用户密码">
            <el-input v-model.trim="loginModel.password" :prefix-icon="Lock" show-password type="password"
              autocomplete="off" class="input-bg">
            </el-input>
          </el-form-item>
          <div class="btn-conter">
            <el-button class="input-bg" @click="login">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
// 接下里怎么玩呢
import { Lock, User } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import useBaseLogin from '@/composables/login/useBaseLogin'
import useLogin from '@/composables/login/useLogin'
const { loginFormRef, loginModel, rules } = useBaseLogin()
const { login } = useLogin(loginModel)

</script>
<style lang="scss" scoped>
.newLogin {
  min-width: 1024px;
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../../assets/images/login-bg.png) no-repeat 0 0 / cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .elForm {
    // height: 520px;
    // width: 622px;
    width: 622px;
    height: 444px;
    background-color: transparent;
    // padding: 20px;
    position: relative;
    background: url(../../assets/images/login-container.png) no-repeat 0 0 / cover;

    .loginHeader {
      font-weight: 800;
      color: red;
      caret-color: transparent;
      font-size: 34px;
      width: 100%;
      height: 50px;
      text-align: center;
      position: absolute;
      top: -70px;
    }

    .loginBg {
      // background-color: transparent;
      width: 100%;
      height: calc(620px - 150px);
      // background-image: url('../../assets/images/login-container.png');
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;

      .login-form-class {
        width: 90%;
        margin: 0 auto;
        padding-top: 100px;
        :deep(.el-form-item__label) {
          color: #fff;
        }

        :deep(.el-form-item__error) {
          color: #fff;
        }

        :deep(.el-input__wrapper) {
          background-color: transparent;
          box-shadow: none;
          background-size: 100% 100%; // 高度 宽度
          background-image: url(../../assets/images/input-bg.png);
          background-repeat: no-repeat;
        }

        :deep(.el-input__inner) {
          background-color: transparent;
          background-position: 0;
          width: 250px !important;

          border: none !important;
          height: 45px;
          color: #fff;
          padding-left: 0px !important;
        }

        .btn-conter {
          margin-top: 50px;
          padding-bottom: 50px;
          display: flex;
          justify-content: center;

          .input-bg {
            width: 100%;
            background-color: transparent;
            background-image: url(../../assets/images/input-bg.png);
            background-position: 0;
            background-size: 100% 100%; // 高度 宽度
            background-repeat: no-repeat;
            border: none;
            height: 45px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>